<template>
	<view>
		<!-- nav栏 -->
		<scroll-view scroll-x="true" show-scrollbar='false' class="nav-box">
		
		<navigator url="/pages/schedule/schedule?id=${Navindex}" open-type="switchTab">
			<view @click="navClick(itme.id)" v-for="(itme,index) in navArr" :key="itme.id" 
			:class="itme.id === getNavindex ? 'active' :''"
			class="nav-itme">{{itme.league}}
			</view>
		</navigator>
			<!-- <view class="nav-itme ">NBA</view>
			<view class="nav-itme ">CBA</view>
			<view class="nav-itme ">足球</view>
			<view class="nav-itme ">网球</view>
			<view class="nav-itme ">网球</view>
			<view class="nav-itme ">网球</view> -->
		
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"navBar",
		data() {
			return {
				//导航栏数据
				navArr:[],
				Navindex:0
			};
		},
		props:["getNavindex"],
		mounted() { 
			console.log("onShow--navBar--");
		},
		created() {
		  console.log("onload----navBar-----");
		  this.getNavData()
		},
		methods:{
			getNavData(){
				uni.request({
					url: 'https://cbs-i.sports.cctv.com/cache/0fe461738f548ffb6227a83776895fad?ran=1668852906652',
					/* https://cbs-i.sports.cctv.com/cache/ef972bd6675867a16c8fd5c0b4597a56?ran=1668853113695 */
					method: 'GET',
					data: {},
					success: res => { 
						console.log(res);				
						//过滤数组
						 let arr = res.data.results.filter((value)=>{
							return value.id === 0 || value.id === 3238 || value.id === 3325 || value.id === 3246 || value.id === 3239 || value.id === 3400 || value.id === 4314 || value.id === 4315
						});
						//将过滤好的数组按照自己想要的顺序排列
						arr.sort((a,b)=>{
							let sortArr = ['热门','世界杯','NBA','CBA','英超','中超','欧冠','意甲']
							return sortArr.indexOf(a.league) - sortArr.indexOf(b.league)
						})
						//赋值
						this.navArr = arr
						console.log(this.navArr);
					},
					fail: () => {},
					complete: () => {}
				});
				
			},
			navClick(id){
				this.Navindex = id;
				try{
					uni.setStorageSync('navIndexKey',id)
				} catch(error){
					console.log(error);
				}
				/* uni.switchTab({
					url: '/pages/schedule/schedule',
					success: res => {
						console.log(id,'navigateTo-------------');
					},
					fail: () => {},
					complete: () => {}
				}); */
				console.log(id,'nav-------------');
			},
		}
		
	}
</script>

<style lang="scss">
    /* nav */
		.nav-box {
			position: fixed;
			top: var(--window-top);
			white-space: nowrap;
			height: 30px;
			line-height: 30px;
			z-index: 9;
			padding-bottom: 10px;
			background-color: #000000;

			/* ::-webkit-scrollbar {
				width: 0px;
				height: 0px;
			} */

			.nav-list {
				display: flex;
				justify-content: space-between;
				color: #fff;

			}

			.nav-itme {
				display: inline-block;
				font-size: 36rpx;
				color: #fff;
				padding: 5rpx 35rpx;

				//margin: 5rpx 50rpx 0rpx 18rpx;
				&.active {
					color: #935559;
				}
			}
		}
</style>